<template>
	<view>
		<image src="../../static/img/lithe3.jpg" mode="" class="picture"></image>
		<!-- 定投分类 -->
		<view class="classify">
			<view class="classify-pin">
				<image src="../../static/img/dintou.png" mode=""></image>
				<view class="">初级定投</view>
			</view>
			<view class="classify-pin">
				<image src="../../static/img/jinjie.png" mode=""></image>
				<view class="">进阶定投</view>
			</view>
			<view class="classify-pin">
				<image src="../../static/img/daren.png" mode=""></image>
				<view class="">达人定投</view>
			</view>
			<view class="classify-pin">
				<image src="../../static/img/dinwei.png" mode=""></image>
				<view class="">县域定投</view>
			</view>
			<view class="classify-pin">
				<image src="../../static/img/yanglao.png" mode=""></image>
				<view class="">养老定投</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="box">
			<view class="date">
				<text>每周一</text>
				<text>更多选择 ></text>
			</view>
			<view class="moeny">存入<text>10</text>元</view>
			<!-- 轮播图 -->
			<view class="carousel">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in arr" :key="index">
						<view class="swiper-item">
							<view class="one">{{item.details}}</view>
							<view class="two">{{item.name}}</view>
							<view class="three">{{item.percent}}</view>
							<view class="four">{{item.day}}</view>
							<button>10元开个好投</button>
						</view>
					</swiper-item>
				</swiper>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		lithe
	} from "../../API/foodShop.js"
	export default {
		data() {
			return {
				arr: []
			}
		},
		methods: {
			fun() {
				lithe().then((res) => {
					if (res.data.code == 200) {
						this.arr = res.data.data
					} else {
						console.log(1111);
					}
				}).catch((Error) => {
					console.log(Error);
				})
			},
			onShow() {
				this.fun()
			}
		}
	}
</script>

<style scoped>
	.picture {
		width: 100%;
	}

	.classify {
		display: flex;
		justify-content: space-evenly;
		margin: 30rpx 0;
		color: #760000;
		font-size: 30rpx;
		margin-bottom: 40rpx;
	}

	.classify image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 15rpx;
		border-radius: 50%;
		padding: 10rpx;
		box-shadow: 0px 0px 10px rgba(255, 100, 10, 0.5);
	}

	.classify-pin {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly
	}

	/* 下面盒子内容 */
	.box {
		width: 85%;
		height: 550rpx;
		background-color: white;
		margin: 0 auto;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx rgba(244 198 170 / 50%);
	}

	.date {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-top: 40rpx;
	}

	.date text:nth-child(1) {
		font-size: 32rpx;
		margin-right: 120rpx;
	}

	.date text:nth-child(2) {
		font-size: 25rpx;
		padding-left: 10rpx;
		color: #760000;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #ffd375b5;
		border-radius: 50rpx 0 0 50rpx;
	}

	.moeny {
		font-size: 36rpx;
		font-weight: 600;
		color: #760000;
		margin-left: 250rpx;
		margin-top: 10rpx;
	}

	.moeny text {
		color: #9c0f04b5;
	}

	/* 轮播图 */
	.carousel {
		width: 80%;
		height: 300rpx;
		background-color: #ffb7002b;
		margin: 40rpx auto;
		border-radius: 20rpx;
	}

	.carousel swiper {
		height: 350rpx;
	}

	.one {
		font-size: 36rpx;
		font-weight: 600;
	}

	.three {
		font-size: 40rpx;
		font-weight: 600;
		color: #9c0f04b5;
	}

	.four {
		color: #6a6a6a;
	}

	.swiper-item button {
		border-radius: 50rpx;
		width: 80%;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #ff31009c;
		color: white;
		margin-top: 10rpx;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		padding: 20rpx;
		height: 280rpx;
	}
</style>